export default {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  legend: {
    bottom: 0,
    width: 'auto',
    itemWidth: 10,
    itemHeight: 10,
    icon: 'rect',
    textStyle: {
      color: '#999'
    },
    data: []
  },
  color: [],
  grid: {
    left: '0',
    right: '0',
    top: '30px',
    bottom: '50px',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: [],
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#999'
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#ccc'
      }
    },
    splitLine: {
      lineStyle: {
        type: [8, 10],
        dashOffset: 0,
        color: '#ccc'
      }
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      color: '#999'
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#ccc'
      }
    },
    splitLine: {
      lineStyle: {
        type: [8, 10],
        dashOffset: 0,
        color: '#ccc'
      }
    },
    name: '贷款余额（亿元）',
    nameTextStyle: {
      color: '#999'
    }
  },
  toolbox: {
    feature: {
      dataView: {
        show: true,
        title: '表格数据',
        lang: ['表格数据', '关闭'],
        buttonColor: '#ff791a',
        readOnly: true,
        emphasis: {
          iconStyle: {
            borderColor: '#ff791a'
          }
        },
        optionToContent(opt) {
          const cols = ['名称', ...opt.xAxis[0].data]
          const data = opt.series
          const table = `<table class="dataViewTable">
              <thead>
                <tr class="dataViewTr">
                  ${cols
                    .map((item) => {
                      return `<td class="dataViewHead">${item}</td>`
                    })
                    .join('')}
                    </tr>
                    </thead>
                    <tbody>
                    ${data
                      .map((item) => {
                        return `<tr class="dataViewTr">
                    <td class="dataViewTd">${item.name}</td>
                    ${item.data
                      .map((item2) => {
                        return `<td class="dataViewTd">${item2}</td>`
                      })
                      .join('')}
                  </tr>`
                      })
                      .join('')}
              </tbody>
            </table>`
          return table
        }
      }
    }
  },
  series: []
}
